<template>
  <div>
    <div class="mb-20">
      <el-input
        style="width: 220px"
        v-model="formData.name"
        clearable
        placeholder="请输入快递公司名称"
      />
      <el-input
        class="ml-10"
        style="width: 220px"
        clearable
        v-model="formData.code"
        placeholder="请输入快递公司编码"
      />
      <el-button class="ml-10" type="primary" @click="searchExpressCompany">搜索</el-button>
    </div>
    <PageTable :columns="columns" :data="dataSource" />
    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getExpressCompany"
    />
  </div>
</template>

<script>
export default {
  name: 'CompanyList',
  components: {},
  props: {},
  data() {
    return {
      formData: {
        name: '',
        code: ''
      },
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      dataSource: [],
      columns: [
        {
          prop: 'name',
          label: '快递名称',
          render: (h, { row }) => {
            return (
              <div>
                <span style={'color: #409eff'}>{row.name}</span>
              </div>
            )
          }
        },
        {
          prop: 'code',
          label: '编码'
        },
        {
          prop: 'sort',
          label: '排序值'
        },
        {
          label: '是否启用',
          render: (h, { row }) => {
            return <span style={'color: #999999'}>{row.showOrNot ? '已启用' : '未启用'}</span>
          }
        },
        {
          prop: 'createdTime',
          label: '创建时间'
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                <el-button type="text" onClick={() => this.editExpressCompany(row.id)}>
                  编辑
                </el-button>
                {row.showOrNot ? (
                  <el-button
                    type="text"
                    style={'color: #999999'}
                    onClick={() => this.updateVisible(row)}
                  >
                    隐藏
                  </el-button>
                ) : (
                  <el-button type="text" onClick={() => this.updateVisible(row)}>
                    启用
                  </el-button>
                )}
                {!row.showOrNot ? (
                  <PopConfirm
                    id={row.id}
                    title={'确定删除该快递公司吗？'}
                    confirm={() => this.deleteCompany(row.id)}
                  >
                    <el-button class="ml-10" type="text" style={'color: #999999'}>
                      删除
                    </el-button>
                  </PopConfirm>
                ) : (
                  ''
                )}
              </div>
            )
          }
        }
      ]
    }
  },
  created() {
    this.getExpressCompany()
  },
  mounted() {},
  methods: {
    // 获取列表
    async getExpressCompany() {
      const params = {
        ...this.listQuery,
        ...this.formData
      }
      const {
        data: { total, records }
      } = await this.$http.express.companyApi.getExpressCompany({ params })
      this.total = total
      this.dataSource = records
    },
    // 是否启用
    async updateVisible({ id, showOrNot }) {
      let message = showOrNot ? '已隐藏' : '已启用'
      let type = showOrNot ? 'hide' : 'show'
      const { status, msg } = await this.$http.express.companyApi.updatedStatus(type, id)
      if (status === 200) {
        this.$message.success(message)
      } else {
        this.$message.error(msg)
      }
      this.getExpressCompany()
    },
    // 删除
    async deleteCompany(id) {
      const { status, msg } = await this.$http.express.companyApi.deleteExpressCompany(id)
      if (status === 200) {
        if (this.dataSource.length === 1 && this.listQuery.pageNo > 1) {
          this.listQuery.pageNo--
        }
        this.$message.success('删除成功')
        this.getExpressCompany()
      } else {
        this.$message.error(msg)
      }
    },
    // 编辑快递公司
    editExpressCompany(id) {
      this.$router.push({
        name: 'EditCompany',
        query: { id }
      })
    },
    // 搜索
    searchExpressCompany() {
      this.listQuery.pageNo = 1
      this.getExpressCompany()
    }
  }
}
</script>

<style lang="scss" scoped></style>
